<template>
  <div>
    <div class="img"><img src="../../../assets/images/aus1.jpg" alt="" /></div>
    <div class="bj">
      <div class="Breadcrumb">
        <div>
          <span>网站首页></span><span>关于酒庄></span><span>企业介绍</span>
        </div>
      </div>
      <div class="box">
        <div class="box-title">
          <img src="../../../assets/images/aus2.jpg" alt="" /><span
            >酒庄介绍</span
          >
        </div>
        <div class="box-text">
          <p>
            &nbsp; &nbsp; &nbsp;燕台山酒庄位于“中国长寿之乡” &nbsp;
            一一一一广西南宁马山县周鹿镇大北屯，是集酿酒、藏酒、加工、宴会、
            住宿、 &nbsp;养生于 体的生态酒庄。
            &nbsp;这里山清水秀、阳光充足，雨量充沛，冬暖夏凉，空气中富含大量的微生物
            类群，非常有益于原浆酒的生产及 &nbsp;洞藏。
          </p>
          <p>
            &nbsp; &nbsp;
            &nbsp;燕台山酒庄酿造的蜜香型原浆酒，是以当地优质有机大米、天然山泉水为原料，利用得天独厚的自然环境，采用祖辈流传下
            来独特的传统工艺，精心酿制而成。酒中富含有会基酸、低聚糖、有机酸和主种维生素，具有很高的营养价值，并且饮后不上
            头、喉咙不痛、对身体份書程度比较小，是圾健康的白酒。
          </p>
          <p>
            &nbsp; &nbsp;
            &nbsp;燕台山酒庄洞藏的原浆酒，全为纯粮酿造，天然洞藏，从酿造到装瓶出售，整个生产过程完全按照
            “绿色“标准执行，粮食通
            过酒曲自然发酵，没有勾兑，不添加任何人工成分（酒精、增香剂）。精选的原浆酒，通过天然洞藏，自然挥发酒液中的醉类
            物质，酒质绵软柔和，酒色幽雅纯净，酒香绵甜酵厚，能消除疲劳、
            安神定气、美颜健体，让人回味悠长，从口感、香气、酒
            质等各个方面都远胜于其它类型白酒。
          </p>
        </div>
        <div>
          <img src="../../../assets/images/aus6.jpg" alt="" />
        </div>
      </div>
      <!-- 返回顶部按钮 -->
      <div class="gotop" v-if="checked">
        <div @click="jumpwinery">
          <img src="../../../assets/images/aus2.jpg" alt="" /><span
            >燕庄介绍</span
          >
        </div>
        <div @click="jumpidea">
          <img src="../../../assets/images/aus3.jpg" alt="" /><span
            >经营理念</span
          >
        </div>
        <div @click="jumpcertificate">
          <img src="../../../assets/images/aus4.jpg" alt="" /><span
            >荣誉证书</span
          >
        </div>
        <div @click="gotop">
          <img src="../../../assets/images/aus5.jpg" alt="" /><span
            >行业优势</span
          >
        </div>
        <div class="btn" @click="gotop">
          <img src="../../../assets/images/btn4.png" alt="返回顶部" /><span
            ></span
          >
        </div>
      </div>
      <!-- 底部导航 -->
      <bottom-nav></bottom-nav>
    </div>
  </div>
</template>

<script>
import bottomNav from "../../../components/bottomNav.vue";
export default {
  name: "winery",
  components: {
    bottomNav,
  },
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    chnegeChecked() {
      let that = this;
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (scrollTop > 100) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //跳转到酒庄介绍
    jumpwinery() {
      this.$router.push({ path: "/frontPage/winery" });
    },
    //跳转到经营理念
    jumpidea() {
      this.$router.push({ path: "/frontPage/idea" });
    },
    //跳转荣誉证书
    jumpcertificate() {
      this.$router.push({ path: "/frontPage/certificate" });
    },
    // 返回顶部
    gotop() {
      document.documentElement.scrollTop = 0;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.chnegeChecked, true);
  },
  beforeRouteEnter(to, from, next) {
    // A跳转到B，B页面停留在A页面的滚动位置；解决方法：将scrollTop设置为0
    window.scroll(0, 0);
    next();
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1029px){
  .img {
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;

    height: auto;
    padding-bottom: 6%;
    background: url("../../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .Breadcrumb {
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: #f1f1f1;
      div {
        margin-left: 240px;
        text-align: left;
      }
    }
    .box {
      width: 80%;
      margin: auto;
      margin-bottom: 15%;
      .box-title {
        margin-top: 80px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f1f1f1;
        span {
          display: inline-block;
          height: 50px;
          line-height: 65px;
          font-size: 25px;
          font-weight: bold;
          color: #ee000e;
        }
      }
      .box-text {
        margin-top: 30px;
        text-align: left;
        font-size: 25px;
        color: #000000;
        p {
          line-height: 50px;
          margin-bottom: 70px;
        }
      }
      div:nth-child(3) {
        img {
          width: 100%;
        }
      }
    }
    // 返回顶部按钮
    .gotop {
      width: 100px;
      position: fixed;
      right: 50px;
      bottom: 366px;
      font-size: 15px;
      background-color: #ffffff;
      div {
        width: 100px;
        height: 100px;
        padding-bottom: 10px;
        border: 1px solid #dddddd;
        img {
          margin-top: 20px;
          padding-bottom: 10px;
        }
        span {
          display: block;
        }
      }
      .btn {
        width: 100px;
      }
    }
    // 底部导航样式
    // .nav-bot {
    //   margin-top: 200px;
    //   color: #000000;
    //   ul {
    //     display: flex;
    //     justify-content: center;
    //     li {
    //       font-size: 18px;

    //       margin: 20px 10px;
    //     }
    //   }
    // }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px){
  .img {
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    height: auto;
    padding-bottom: 6%;
    background: url("../../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .Breadcrumb {
      width: 100%;
      height: 44px;
      font-size: 14px;
      line-height: 44px;
      background-color: #f1f1f1;
      div {
        text-align: left;
      }
    }
    .box {
      width: 80%;
      margin: auto;
      margin-bottom: 5%;
      .box-title {
        margin-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f1f1f1;
        span {
          display: inline-block;
          height: 50px;
          line-height: 65px;
          font-size: 25px;
          font-weight: bold;
          color: #ee000e;
        }
      }
      .box-text {
        margin-top: 10px;
        text-align: left;
        font-size: 25px;
        color: #000000;
        p {
          font-size: 14px;
          line-height: 50px;

        }
      }
      div:nth-child(3) {
        img {
          width: 100%;
        }
      }
    }
    // 返回顶部按钮
    .gotop {
      width: 50px;
      position: fixed;
      right: 30px;
      bottom: 166px;
      font-size: 15px;
      background-color: #ffffff;
      div {
        width: 75px;
        height: 70px;
        padding-bottom: 10px;
        border: 1px solid #dddddd;
        img {
          width: 64%;
          margin-top: 20px;
          padding-bottom: 10px;
        }
        span {
          display: block;
        }
      }
      .btn {
        width: 75px;
      }
    }
  }
}
@media screen and (max-width: 749px){
  .img {
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    height: auto;
    padding-bottom: 6%;
    background: url("../../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .Breadcrumb {
      width: 100%;
      height: 34px;
      font-size: 12px;
      line-height: 34px;
      background-color: #f1f1f1;
      div {
        text-align: left;
      }
    }
    .box {
      width: 90%;
      margin: auto;
      margin-bottom: 5%;
      .box-title {
        border-bottom: 1px solid #f1f1f1;
        img{
          display: none;
        }
        span {
          display: inline-block;
          height: 50px;
          line-height: 65px;
          font-size: 12px;
          font-weight: bold;
          color: #ee000e;
        }
      }
      .box-text {
        margin-top: 10px;
        text-align: left;
        font-size: 12px;
        color: #000000;
        p {
          font-size: 12px;
          line-height: 24px;

        }
      }
      div:nth-child(3) {
        img {
          width: 100%;
        }
      }
    }
    // 返回顶部按钮
    .gotop {
      /*width: 50px;*/
      position: fixed;
      right: 0;
      bottom: 100px;
      font-size: 15px;
      background-color: #ffffff;
      div {
        display: none;
        width: 75px;
        /*height: 70px;*/
          /*padding-bottom: 10px;*/
        border: 1px solid #dddddd;
        img {
          width: 64%;
          /*margin-top: 20px;*/
          /*padding-bottom: 10px;*/
        }
        span {
          display: block;
        }
      }
      .btn {
        img{
          width: 100%;
        }
        /*display: block;*/
        width: 35px;
      }
    }
  }
}
</style>